<template>

 <div>
   <div style="height: 60px;line-height:50px;border-bottom: 1px solid #ccc; display: flex;">
     <!--网页信息-->
     <div style="width: 200px;padding-left: 30px;font-weight: bold;color: dodgerblue">
       学习知识汇聚平台
     </div>

     <div style="flex: 1">

       <div style="margin: 0 auto;max-width: 450px; ">
         <el-input
             placeholder="请输入内容"
             v-model="input3"
             class="input-with-select"
         >
           <template #prepend>
             <el-select v-model="select" placeholder="请选择" style="width: 100px" @change='changeSelect'>
               <el-option label="专题名" value="1"></el-option>
               <el-option label="博客名" value="2"></el-option>
               <el-option label="用户名" value="3"></el-option>
             </el-select>
           </template>
           <template #append>
             <el-button icon="el-icon-search"></el-button>
           </template>
         </el-input>
       </div>
     </div>
     <!--个人信息头像-->
     <span style="margin-right: 8px"  :content="username"> {{username}}
     </span>

     <div style="width:55px;padding-top: 3px">
<!--       查询用户头像-->

       <el-avatar src=iconurl>
         <img :src="iconurl">
       </el-avatar>
     </div>
     <div style="width: 150px;">
       <!--个人信息姓名获取\下拉菜单-->
       <el-dropdown>
      <span class="el-dropdown-link">
        <el-button type="primary">
        个人中心<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
      </span>
         <template #dropdown>

           <el-dropdown-menu>
             <el-dropdown-item icon="el-icon-user">
               <router-link :to="{name:'Blog'}"  style="color: #333333;text-decoration: none">个人中心</router-link>
             </el-dropdown-item>

             <el-dropdown-item icon="el-icon-plus">

                 <router-link :to="{name:'BlogEdit'}"  style="color: #333333;text-decoration: none">创建博客</router-link>


             </el-dropdown-item>

             <span v-if="form.category"><el-dropdown-item icon="el-icon-circle-plus">创建专题</el-dropdown-item></span>
             <el-dropdown-item icon="el-icon-close">
               <el-link style="color: #333333;text-decoration: none" @click="logout">退出登录
               </el-link>
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>

     </div>

   </div>
 </div>
</template>

<script>
import request from "@/utils/request";
const axios = require('axios');
import { defineComponent, ref } from 'vue'

export default {
name: "headers",
  data(){
  return{
    input3: '',
    select: '',
    listMaterial:{},
    uid:sessionStorage.getItem("uid"),
    username:'',
    iconurl:'',
    category:'',
    form:[]
  }
  }
  ,

  created()
  {
      this.load()
  },

  methods:
      {
        changeSelect(event){
          this.$set(this.listMaterial,event,this.input3)
          //这个this.$set 是重点 event是切换的属性，input3是输入框的值
        },
        //加载头部信息，包括用户头像、用户名、用户权限
        load(){
          request.get("/api/head",{params:{uid:this.uid}}).then(res =>{
            this.username = res.data[0].username
            this.iconurl=res.data[0].iconurl
            this.category=res.data[0].category
            console.log(res)
            console.log('传到页面的数据为'+this.username)
            console.log('传到页面的数据为'+this.iconurl)
          })
        },
        //后端清除数据，跳转登陆界面
        logout() {
          const _this = this
          // _this.$axios.get("/logout").then(res =>
          // {
          _this.$store.commit("REMOVE_INFO")
          _this.$router.push("/login")
        },
      },
}
</script>
<style>

.el-select.el-input {
  width: 130px;
}
.input-with-select.el-input-group__prepend {
  background-color: #fff;
}

</style>